<template>
    <div class="privacy-settings-page">
        <van-nav-bar title="Privacy Settings" left-text="Back" left-arrow @click-left="$router.back()" />

        <div class="settings-content">
            <van-cell-group inset title="Profile Visibility">
                <van-cell title="Profile Visibility" is-link @click="showVisibilityPicker = true">
                    <template #value>{{ selectedVisibility }}</template>
                </van-cell>
                <van-cell title="Show Training Progress" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.showProgress" />
                    </template>
                </van-cell>
                <van-cell title="Show Achievement Badges" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.showAchievements" />
                    </template>
                </van-cell>
            </van-cell-group>

            <van-cell-group inset title="Data & Analytics">
                <van-cell title="Allow Analytics" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.analytics" />
                    </template>
                </van-cell>
                <van-cell title="Personalized Recommendations" is-link>
                    <template #right-icon>
                        <van-switch v-model="settings.recommendations" />
                    </template>
                </van-cell>
            </van-cell-group>

            <div class="save-section">
                <van-button type="primary" block @click="saveSettings">
                    Save Settings
                </van-button>
            </div>
        </div>

        <van-popup v-model:show="showVisibilityPicker" position="bottom">
            <van-picker :columns="visibilityOptions" @confirm="onVisibilityConfirm"
                @cancel="showVisibilityPicker = false" />
        </van-popup>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { showToast } from 'vant'

const settings = reactive({
    showProgress: true,
    showAchievements: true,
    analytics: false,
    recommendations: true
})

const showVisibilityPicker = ref(false)
const selectedVisibility = ref('Public')

const visibilityOptions = [
    { text: 'Public', value: 'public' },
    { text: 'Friends Only', value: 'friends' },
    { text: 'Private', value: 'private' }
]

const onVisibilityConfirm = (value: any) => {
    selectedVisibility.value = value.text
    showVisibilityPicker.value = false
}

const saveSettings = () => {
    showToast('Privacy settings saved!')
}
</script>

<style lang="scss" scoped>
.privacy-settings-page {
    min-height: 100vh;
    background: #f8f9fa;
}

.settings-content {
    padding: 16px;
}

.save-section {
    margin-top: 24px;
}
</style>